<template>
  <div class="accept-box" ref="RefLayout">
    <div class="accept-box-main">
      <a-row justify="space-evenly">
        <div>
          <div class="title">
            组织名称
          </div>
          <div class="info">
            <a-row>
              <a-col :span="20">
                <a-input-search style=" background: none; border: 1px solid #ccc;" v-model="searchKey"
                  placeholder="请输入组织名称" />
              </a-col>
              <a-col :span="20">
                <a-tree :data="treeData" @select="onSelect" :default-expand-all="isExpand"
                  :field-names="{ title: 'title', key: 'id', children: 'children' }">
                  <template #icon>
                    <img src="@/assets/images/qietu.png" alt="">
                  </template>
                  <template #title="{ data }">
                    {{ data.title }}
                    <a-dropdown trigger="hover">
                      <icon-more-vertical />
                      <template #content>
                        <a-doption @click="handleClick">编辑</a-doption>
                        <a-doption>删除</a-doption>
                        <a-doption @click="handleClick">添加</a-doption>
                      </template>
                    </a-dropdown>
                  </template>
                </a-tree>
              </a-col>
            </a-row>
          </div>
        </div>

        <div class="right">
          <div class="title">
            <span>组织信息</span>
          </div>
          <div class="infos">
            <a-form ref="refForm">
              <a-row>
                <a-col :span="10">
                  <a-form-item field="" label="组织姓名：" label-col-flex="100px">{{ infoForm.code }}</a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item field="" label="组织类型：" label-col-flex="100px">{{ infoForm.code }}</a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item field="" label="联系人：" label-col-flex="100px">{{ infoForm.code }}</a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item field="" label="统计社会信用度代码：" label-col-flex="140px">{{ infoForm.code }}</a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item field="" label="手机号：" label-col-flex="100px">{{ infoForm.code }}</a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item field="" label="注册地址：" label-col-flex="100px">{{ infoForm.code }}</a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item field="" label="联系地址：" label-col-flex="100px">{{ infoForm.code }}</a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item field="" label="组织logo：" label-col-flex="100px">{{ infoForm.code }}</a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>

          <div class="title">
            <span>下级列表</span>
          </div>
          <div class="table-box w-full overflow-hidden"
            :style="{ height: moreFilterKey ? 'calc(100% - 232px)' : 'calc(100% - 92px)' }">
            <a-table :columns="columns" :data="list" :pagination="false" :scroll="scrollConfig">
            </a-table>
          </div>
          <div class="page-box w-full h-[40px] overflow-hidden flex justify-end items-center">
            <a-pagination :total="page.total" show-total show-page-size @page-size-change="handleSizeChange"
              @change="handleCurrentChange" />
          </div>
        </div>

      </a-row>
    </div>
  </div>
  <div>
    <a-modal v-model:visible="visible" title="新增组织" @cancel="handleCancel" @before-ok="handleBeforeOk" width="800px">
      <a-form :model="form">
        <a-form-item field="name" label="企业名称" :rules="[{ required: true, message: '请输入企业名称' }]">
          <a-input v-model="form.name" placeholder="请输入企业名称" />
        </a-form-item>
        <a-form-item label="是否为外部机构" field="value1" :rules="[{ required: true, message: '请输选择外部机构' }]">
          <a-space direction="vertical" size="large">
            <a-radio-group v-model="form.value1" :options="plainOptions" />
          </a-space>
        </a-form-item>
        <a-form-item field="post" label="组织类型" :rules="[{ required: true, message: '请选择组织类型' }]">
          <a-select v-model="form.post" placeholder="请选择组织类型">
            <a-option value="post1">Post1</a-option>
            <a-option value="post2">Post2</a-option>
            <a-option value="post3">Post3</a-option>
            <a-option value="post4">Post4</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="Socialcode" label="统一社会信用代码" :rules="[{ required: true, message: '请输入统一社会信用代码' }]">
          <a-input v-model="form.Socialcode" placeholder="请输入统一社会信用代码" type="text" />
        </a-form-item>
        <a-form-item field="Contactperson" label="联系人" :rules="[{ required: true, message: '请输入联系人' }]">
          <a-input v-model="form.Contactperson" placeholder="请输入联系人" type="text" />
        </a-form-item>
        <a-form-item field="Contactnumber" label="联系电话" :rules="[{ required: true, message: '请输入联系电话' }]">
          <a-input v-model="form.Contactnumber" placeholder="请输入联系电话" type="number" />
        </a-form-item>
        <a-form-item field="Registeredaddress" label="注册地址" :rules="[{ required: true, message: '请输入注册地址' }]">
          <a-input v-model="form.Registeredaddress" placeholder="请输入注册地址" />
        </a-form-item>
        <a-form-item field="Contactaddress" label="联系地址" :rules="[{ required: true, message: '请输入联系电话' }]">
          <a-input v-model="form.Contactaddress" placeholder="请输入联系电话" />
        </a-form-item>
        <a-form-item field="Uploadlogo" label="上传企业logo">
          <a-space direction="vertical" :style="{ width: '100%' }">
            <a-upload action="/" :fileList="file ? [file] : []" :show-file-list="false" @change="onChange"
              @progress="onProgress">
              <template #upload-button>
                <div :class="`arco-upload-list-item${file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
                  }`">
                  <div class="arco-upload-list-picture custom-upload-avatar" v-if="file && file.url">
                    <img :src="file.url" />
                    <div class="arco-upload-list-picture-mask">
                      <IconEdit />
                    </div>
                    <a-progress v-if="file.status === 'uploading' && file.percent < 100" :percent="file.percent"
                      type="circle" size="mini" :style="{
                        position: 'absolute',
                        left: '50%',
                        top: '50%',
                        transform: 'translateX(-50%) translateY(-50%)'
                      }" />
                  </div>
                  <div class="arco-upload-picture-card" v-else>
                    <div class="arco-upload-picture-card-text">
                      <IconPlus />
                      <div style="margin-top: 10px; font-weight: 600">上传图片</div>
                    </div>
                  </div>
                </div>
              </template>
            </a-upload>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
// import { userLists, treeList } from "@/api/roleManagement/roleManagement.ts"
const searchKey = ref('');
const moreFilterKey = ref(false);
const visible = ref(false);
const plainOptions = reactive(['是', '否']);
const isExpand = ref(false)
const RefLayout = ref();
const infoForm = ref({
  code: ''
})
const form = reactive({
  name: '',
  post: '',
  value1: '是否为外部机构',
  Socialcode: '',
  Contactperson: '',
  Contactnumber: '',
  Registeredaddress: '',
  Contactaddress: ''
});
const handleClick = () => {
  visible.value = true;
  file.value = '';
};
const handleCancel = () => {
  visible.value = false;
};

// 表格滚动
const scrollConfig = computed(() => {
  if (RefLayout.value) {
    const rs = {
      x: '0px',
      y: `${RefLayout.value.clientHeight - (moreFilterKey.value ? 272 : 132)}px`
    };
    console.log(`[ rs ]=>`, RefLayout.value.clientHeight, rs);
    return rs;
  }
  return {
    x: '0',
    y: '0'
  };
});
const treeData = ref([]);
// const originTreeData = reactive([
//   {
//     title: 'Trunk 0-0',
//     key: '0-0',
//     children: [
//       {
//         title: 'Branch 0-0-1',
//         key: '0-0-1',
//         children: [
//           {
//             title: 'Leaf 0-0-1-1',
//             key: '0-0-1-1'
//           },
//           {
//             title: 'Leaf 0-0-1-2',
//             key: '0-0-1-2'
//           }
//         ]
//       }
//     ]
//   },
//   {
//     title: 'Trunk 0-1',
//     key: '0-1',
//     children: [
//       {
//         title: 'Branch 0-1-1',
//         key: '0-1-1',
//         children: [
//           {
//             title: 'Leaf 0-1-1-0',
//             key: '0-1-1-0'
//           }
//         ]
//       },
//       {
//         title: 'Branch 0-1-2',
//         key: '0-1-2',
//         children: [
//           {
//             title: 'Leaf 0-1-2-0',
//             key: '0-1-2-0'
//           }
//         ]
//       }
//     ]
//   }
// ]);

const columns = reactive([
  {
    title: '组织编码',
    dataIndex: 'account'
  },
  {
    title: '组织名称',
    dataIndex: 'org_name'
  },
  {
    title: '组织类型',
    dataIndex: 'org_type'
  },
  {
    title: '联系人',
    dataIndex: 'username'
  },
  {
    title: '手机号',
    dataIndex: 'status'
  },
]);
/**
 * @method table表格的数据
 */
const list = ref([
  {
    id: 1,
    order: 0,
    role_desc: '',
    role_name: 'root',
    status: true
  },
  {
    id: 2,
    order: 1,
    role_desc: '长春-管理员',
    role_name: '长春-管理员',
    status: true
  },
  {
    id: 3,
    order: 1,
    role_desc: '中电管理员',
    role_name: '中电管理员',
    status: true
  },
  {
    id: 4,
    order: 1,
    role_desc: '中电SaaS管理端',
    role_name: '中电-管理端',
    status: true
  }
]);
const page = ref({
  page: 1,
  page_size: 10,
  total: 15
});
onMounted(() => {
  getList()
  // treeLists()
})
const getList = () => {
  let param = {
    page: page.value.page,
    page_size: page.value.page_size
  }
  // userLists(param).then(res => {
  //   console.log(res)
  //   list.value = res.data
  //   page.value.total = res.data.total

  // })
}
// const treeLists = () => {
//   treeList().then(res => {
//     // console.log(res)
//     const data = res.data;
//     console.log(data, 'ssssssss')
//     treeData.value = formatTreeData(data);
//   })
// }
const formatTreeData = (data) => {
  // console.log(data)
  data.children.map(item => ({
    id: item.parent_id,
    title: item.org_name,
    children: item.children
  }))
  data.title = data.org_name
  data.id = data.parent.id
  return [data]
}
// const treeData = computed(() => {
// //   if (!searchKey.value) return originTreeData;
// //   return searchData(searchKey.value);
// // });

function searchData(keyword) {
  console.log(keyword);

  const loop = (data) => {
    console.log(data);

    const result = [];
    data.forEach((item) => {
      if (item.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
        result.push({ ...item });
      } else if (item.children) {
        const filterData = loop(item.children);
        if (filterData.length) {
          result.push({
            ...item,
            children: filterData
          });
        }
      }
    });
    return result;
  };

  // return loop(originTreeData);
}

function getMatchIndex(title) {
  if (!searchKey.value) return -1;
  return title.toLowerCase().indexOf(searchKey.value.toLowerCase());
}
</script>
<style lang="less" scoped>
.accept-box {
  height: calc(100vh - 184px);
  overflow: hidden;
  padding-bottom: 40px;

  &-main {
    height: 100%;
    overflow-y: auto;
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    color: #394d73;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .info {
    border-right: 1px solid #EBF0FA;
    //  border-height: 50px;
    height: 800px;
    //    position: absolute;
    //    top:40px;
    //    left:20px;
    //   background:orange;
    width: 260px;

    //  margin-bottom:20px;
    :deep(.arco-form-item) {
      margin-bottom: 0;
    }
  }

  .right {
    margin-left: 25px;

    .infos {
      background: #f7f9fc;
      padding-top: 10px;
      padding-bottom: 10px;
      //   float:left;

      :deep(.arco-form-item) {
        margin-bottom: 0;
        display: flex;
        justify-content: space-around;
      }
    }
  }
}
</style>